<template>
	<div>
		<div v-if="pepleishow" class="x-unit" @click.self="closeMask" :style="{height:`${deviceH}px`}">
			<div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
				<div class="ctx-title">租房管理</div>
				<div class="zufang_top">
					<ul>
						<li style="cursor: pointer;" @click="intelligenceDetailPageShow('申报总数',1)">
							<img src="../../assets/images/zufang_shenbao.png" alt="">
							<div>
								<p>申报总数</p>
								<p>{{shenbaototal}}</p>
							</div>
						</li>
						<li >
							<img src="../../assets/images/zufang_beian.png" alt="">
							<div>
								<p>已备案数</p>
								<p>{{beiantotal}}</p>
							</div>
						</li>
						<li >
							<img src="../../assets/images/zufang_shenhe.png" alt="">
							<div>
								<p>待审核数</p>
								<p>{{shenhetotal}}</p>
							</div>
						</li>
						<!-- <li>
							<img src="../../assets/images/zufang_bohui.png" alt="">
							<div>
								<p>驳回数</p>
								<p>{{bohuitotal}}</p>
							</div>
						</li> -->
						<li>
							<img src="../../assets/images/zufang_fangdong.png" alt="">
							<div>
								<p>
									<span style="width:115px;display: block;float: left;text-align: center;margin-bottom: 5px;cursor: pointer;" @click="intelligenceDetailPageShow('房东',20)">房东</span>
									</p>
								<p style="margin-top:5px;">
									<span style="width:115px;display: block;float: left;text-align: center;cursor: pointer;" @click="intelligenceDetailPageShow('房东',20)">{{fangdong1total}}</span>
									</p>
							</div>
						</li>
            <li>
              <div>
                 <p>
                <span style="width:140px;display: block;float: left;text-align: center;margin-bottom: 5px;cursor: pointer;"
									 @click="intelligenceDetailPageShow('二房东',21)">二房东</span>
              </p>
              <p style="margin-top:5px;">
                <span style="width:140px;display: block;float: left;text-align: center;cursor: psointer;"
									 @click="intelligenceDetailPageShow('二房东',21)">{{fangdong2total}}</span>
                </p>
              </div>

            </li>
            <li>
              <div>
                <p>
                <span style="width:115px;display: block;float: left;text-align: center;margin-bottom: 5px;cursor: pointer;" @click="intelligenceDetailPageShow('租客',3)">租客</span>

              </p>
              <p style="margin-top:5px;">
                	<span style="width:115px;display: block;float: left;text-align: center;cursor: pointer;" @click="intelligenceDetailPageShow('租客',3)">{{zuketotal}}</span>
              </p>
              </div>

            </li>
					</ul>
				</div>
				<div class="zufang_middle">
					<div class="zufang_middle_left">
						<div id="main" style="width: 780px;height: 200px;"></div>
						<div class="two_ects">
							<div id="main2" style="width: 300px;height: 200px;"></div>
							<div id="main3" style="width: 458px;height: 230px;"></div>
						</div>
					</div>
					<div class="zufang_middle_right">
						<div class="type-title">租客户籍分布</div>
						<ul v-if="UnitTypeEchartsData.length" class="type-list" id="ulhight">
							<li v-for="item in UnitTypeEchartsData" :key="item.name" class="type-list-rs">
								<div class="rs-name">
									<span class="name">{{item.name}}</span>
									<span class="number">{{item.value}}</span>
								</div>
								<div class="rs-process">
									<div class="process" :style="{width:`${(item.value/zuketotal)*100}%`}"></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="zufang_bottom">
					<div id="main4" style="width: 550px;height: 230px;"></div>
					<div id="main5" style="width: 550px;height: 230px;"></div>
				</div>
			</div>
		</div>

		<!--详情页-->
		<div @click.self="closeMask" v-if="!pepleishow" class="x-house" :style="{ height: `${deviceH}px` }">
			<div v-show="isShowCtx == 2" class="house-ctx page2" :style="{ 'background-image': `url(${modelBg1})` }">
				<!--返回按钮-->
				<span @click="maskPageHide()" style="float:right;cursor:pointer;" class="back">
					<img src="../../assets/images/icon/return.png" />
				</span>
				<!-- 总览 -->
				<div class="footer-unit" style="margin-top:20px" v-if="typeId == 1">
					<div class="unit-header">
						<div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
					</div>

					<div style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;">
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleName" class="input" placeholder="姓名" />
						</div>
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleUserID" class="input" placeholder="身份证号" />
						</div>
						<el-date-picker v-model="totalTime" type="daterange" class="dateselect" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" style="background: #06121d !important;margin-right: 20px;"></el-date-picker>
						<div class="header-select" style="margin-right:20px;">
							<x-select @selectItem="selectItem" :name="unitTypeName || '全部'" :listItem="unitTypeList" />
						</div>
						<div @click="searchEvent()" class="header-btn">搜索</div>
					</div>

					<div class="unit-list">
						<ul class="list-ul">
							<li class="list-li">
								<div class="item-no" style="width: 5%;">序号</div>
								<div class="li-name" style="width: 10%;">姓名</div>
								<div class="li-phone" style="width: 15%;">身份证号</div>
								<div class="li-phone" style="width: 15%;">小区</div>
								<div class="li-phone" style="width: 8%;">楼栋</div>
								<div class="li-phone" style="width: 8%;">房间</div>
								<div class="li-phone" style="width: 10%;">状态</div>
								<div class="li-phone" style="width: 8%;">审核人</div>
								<div class="li-phone" style="width: 16%;">审核时间</div>
							</li>
							<li  v-if="intelligence.length >= 0" v-for="(item, index) in intelligence" :key="index" class="list-li" @click="showPeopleDetail(index, item)" style="cursor: pointer;">
								<div class="item-no" style="width: 5%;">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
								<div class="li-name" style="width: 10%;">{{ item.landlordname }}</div>
								<div :title="item.landlordcardid" class="li-phone" style="width: 15%;">{{ new String().hideidCard(item.landlordcardid) }}</div>
								<div class="li-phone" style="width: 15%;">{{ item.estate }}</div>
								<div class="li-phone" style="width: 8%;">{{ item.unitno }}</div>
								<div class="li-phone" style="width: 8%;">{{ item.houseno }}</div>
								<div class="li-phone" style="width: 10%;">{{ item.status }}</div>
								<div class="li-phone" style="width: 8%;">{{ item.lastmodifiedby }}</div>
								<div class="li-phone" style="width: 16%;">{{ item.lastmodifieddate!=null?item.lastmodifieddate.substr(0,10):'' }}</div>
							</li>
						</ul>
					</div>
					<div v-if="allpage > 0" class="table-footer">
						<x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
					</div>
				</div>
				<!-- 房东，二房东 -->
				<div class="footer-unit" style="margin-top:20px"  v-if="typeId == 20 || typeId == 21">
					<div class="unit-header">
						<div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
					</div>

					<div style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;">
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleName" class="input" placeholder="姓名" />
						</div>
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleUserID" class="input" placeholder="身份证号" />
						</div>
						<el-date-picker v-model="totalTime" type="daterange" class="dateselect" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" style="background: #06121d !important;margin-right: 20px;"></el-date-picker>
						<div class="header-select" style="margin-right:20px;">
							<x-select @selectItem="selectItem" :name="unitTypeName || '全部'" :listItem="unitTypeList" />
						</div>
						<div @click="searchEvent()" class="header-btn">搜索</div>
					</div>

					<div class="unit-list">
						<ul class="list-ul">
							<li class="list-li">
								<div class="item-no" style="width: 8%;">序号</div>
								<div class="li-phone" style="width: 16%;">手机</div>
								<div class="li-phone" style="width: 14%;">创建人</div>
								<div class="li-phone" style="width: 24%;">创建时间</div>
								<div class="li-phone" style="width: 14%;">审核人</div>
								<div class="li-phone" style="width: 24%;">审核时间</div>
							</li>
							<li  v-if="intelligence.length >= 0" v-for="(item, index) in intelligence" :key="index" class="list-li">
								<div class="item-no" style="width: 8%;">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
								<div class="li-phone" style="width: 16%;">{{ item.mobile }}</div>
								<div class="li-phone" style="width: 14%;">{{ item.createdby |filterName}}</div>
								<div class="li-phone" style="width: 24%;">{{ item.createddate!=null?item.createddate.substr(0,10):'' }}</div>
								<div class="li-phone" style="width: 14%;">{{ item.lastmodifiedby |filterName}}</div>
								<div class="li-phone" style="width: 24%;">{{ item.lastmodifieddate!=null?item.lastmodifieddate.substr(0,10):'' }}</div>
							</li>
						</ul>
					</div>
					<div v-if="allpage > 0" class="table-footer">
						<x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
					</div>
				</div>
				<!-- 租客 -->
				<div class="footer-unit" style="margin-top:20px" v-if="typeId == 3">
					<div class="unit-header">
						<div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
					</div>

					<div style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;">
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleName" class="input" placeholder="姓名" />
						</div>
						<div class="header-item" style="margin-right:20px;">
							<input v-model="peopleUserID" class="input" placeholder="身份证号" />
						</div>
						<el-date-picker v-model="totalTime" type="daterange" class="dateselect" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" style="background: #06121d !important;margin-right: 20px;"></el-date-picker>
						<div class="header-select" style="margin-right:20px;">
							<x-select @selectItem="selectItem" :name="unitTypeName || '全部'" :listItem="unitTypeList" />
						</div>
						<div @click="searchEvent()" class="header-btn">搜索</div>
					</div>

					<div class="unit-list">
						<ul class="list-ul">
							<li class="list-li">
								<div class="item-no" style="width: 10%;">序号</div>
								<div class="li-name" style="width: 20%;">姓名</div>
								<div class="li-phone" style="width: 35%;">身份证号</div>
								<div class="li-phone" style="width: 35%;">手机</div>
							</li>
							<li  v-if="intelligence.length >= 0" v-for="(item, index) in intelligence" :key="index" class="list-li"  @click="showPeopleDetail1(item.cardid)" style="cursor: pointer;">
								<div class="item-no" style="width: 10%;">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
								<div class="li-name" style="width: 20%;">{{ item.name }}</div>
								<div :title="item.landlordcardid" class="li-phone" style="width: 35%;">{{ new String().hideidCard(item.cardid) }}</div>
								<div class="li-phone" style="width: 35%;">{{ item.mobile }}</div>
							</li>
						</ul>
					</div>
					<div v-if="allpage > 0" class="table-footer">
						<x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
					</div>
				</div>
			</div>
       <div
        v-if="isShowCtx == 3"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
        s
      >
        <div>
          <x-dangan :id="danganid" @changedangan="changedangan"></x-dangan>
        </div>
      </div>

		</div>

	</div>
</template>
<script>
	import XPage from "@/components/xpage";
  import XSelect from "@/components/xselect";
   import XDangan from "@/components/xdanganmodel";
   import user from '@/api/user.json'
	import {
		exportExcel
	} from 'xlsx-oc'
	import {
		GetEpidemicInfo,
		getHouseRentalForPage,
		getHouseOwnerForPage,
		getHouseTenantForPage
	} from '@/api/peopleApi';
	export default {
		name: "xzufang",
		props: {
			id: {
				type: String,
				default: ""
			},
			code: {
				type: String,
				default: ""
			},
			zufangInfo: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {

		},
		data() {
			return {
				modelBg: require('@/assets/images/modelBg.png'),
				shenbaototal: '',
				beiantotal: '',
				shenhetotal: '',
				bohuitotal: '',
				fangdong1total: '',
				fangdong2total: '',
				zuketotal: '',
				UnitTypeEchartsData: [],
				clickTitle: '',
				pepleishow: true,
				isShowCtx: 2,
				pageNum: 1,
				pageSize: 10,
				intelligence: [],
				alltotal: 0,
				allpage: 0,
				modelBg1: require("@/assets/images/modelBg.png"),
				peopleName: '',
				peopleUserID: '',
				peoplePhone: '',
				peopleLicense: '',
				unitTypeName: '',
				unitType: '',
				unitTypeList: [{
					'enumName': '全部',
					'id': 10
				}, {
					'enumName': '审核中',
					'id': 3
				}, {
					'enumName': '审核成功',
					'id': 1
				}],
				typeId: '',
				totalTime: '',
				startTime: '',
        endTime: '',
         danganid: "",
			}
		},
		beforeMount() {
			let h = document.documentElement.clientHeight || document.body.clientHeight;
			this.deviceH = h
		},
		mounted() {

			this.getzkld()
			this.getsafe()
			this.getzukeage()
			this.getxzzk()
			this.getdnxzzk()
			console.log(this.zufangInfo)
			this.shenbaototal = this.zufangInfo[0].itmes
			this.beiantotal = this.zufangInfo[1].itmes
			this.shenhetotal = this.zufangInfo[2].itmes
			this.bohuitotal = this.zufangInfo[3].itmes
			this.fangdong1total = this.zufangInfo[4].itmes
			this.fangdong2total = this.zufangInfo[5].itmes
			this.zuketotal = this.zufangInfo[6].itmes
			this.UnitTypeEchartsData = this.zufangInfo[8].itmes
    },
    filters:{
       filterName(val) {
         var name=''
         user.map(item=>{
           if(item.userid==val){
             name=item.truename
           }

         })
        return name
      }
    },
		components: {
			XPage,
      XSelect,
       XDangan
		},
		methods: {
        showPeopleDetail(index, item){
    this.danganid=item.landlordcardid
    this.isShowCtx = 3

  },
       showPeopleDetail1(id){
    this.danganid=id
    this.isShowCtx = 3

  },
      changedangan() {
      this.isShowCtx = 2;
    },
			getzkld() {
				let data = []
				let value = []
				for (let i in this.zufangInfo[7].itmes) {
					data.push(this.zufangInfo[7].itmes[i].name)
					value.push(this.zufangInfo[7].itmes[i].value)
				}
				let echarts = document.getElementById('main')
				let myChart = this.$echarts.init(echarts)
				myChart.setOption({
					title: {
						text: '租客楼栋分布',
						x: 'left',
						textStyle: {
							color: '#56FFFA'
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '5%'
					},
					color: ['#68e0cf'],
					xAxis: [{
						type: 'category',
						data: data,
						axisLine: {
							lineStyle: {
								color: '#FFF'
							}
						},
						// axisLabel: {
						//   formatter: function(val) {
						//     return val.length > 5 ? val.substr(0, 4) + "..." : val
						//   }
						// },
						triggerEvent: true
					}],
					yAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#FFF'
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: ['#6c6c6c'],
								width: 1,
								type: 'solid'
							},
						}
					}],
					series: [{
						name: '楼栋租客数量',
						type: 'bar',
						barWidth: 20,
						data: value
					}]
				})
			},

			getsafe() {
				let echarts = document.getElementById('main2')
				let myChart = this.$echarts.init(echarts)
				myChart.setOption({
					//color: ['0e99ff', '0e99ff', '77dd07', 'fec940', 'fec940'],
					title: {
						text: '安全检查',
						x: 'left',
						textStyle: {
							color: '#56FFFA'
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					grid: {

					},
					legend: {
						orient: 'vertical',
            left: '60%',
            top:'35%',
						data: ['已整改隐患', '未整改隐患', '处罚数'],
						textStyle: {
							color: '#fff'
						}
					},
					color: ['#209cff', '#68e0cf', '#dea55c'],
					stillShowZeroSum: false,
					series: [{
						name: '',
						type: 'pie',
						radius: ['40%', '60'],
						center: ['30%', '60%'],
						data: [{
							name: '已整改隐患',
							value: '100'
						}, {
							name: '未整改隐患',
							value: '200'
						}, {
							name: '处罚数',
							value: '300'
						}],
						label: {
							show: false,
							// formatter:'问题数据量\n{c}',
							position: 'center',
							lineHeight: 30,
							// emphasis: {
							// 	show: true,
							// 	textStyle: {
							// 		fontSize: '30',
							// 		fontWeight: 'bold',
							// 	}
							// }
						},
						itemStyle: {

							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(128, 128, 128, 0.5)'
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						}
					}]
				})
			},

			getzukeage() {
				let data = []
				let value = []
				for (let i in this.zufangInfo[9].itmes) {
					data.push(this.zufangInfo[9].itmes[i].resultname)
					value.push(this.zufangInfo[9].itmes[i].itmes)
				}

				let echarts = document.getElementById('main3')
				let myChart = this.$echarts.init(echarts)
				myChart.setOption({
					title: {
						text: '租客年龄分布',
						x: 'left',
						textStyle: {
							color: '#56FFFA'
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '6%'
					},
					color: ['#68e0cf'],
					xAxis: [{
						type: 'category',
						data: data,
						axisLine: {
							lineStyle: {
								color: '#FFF'
							}
						},
						// axisLabel: {
						//   formatter: function(val) {
						//     return val.length > 5 ? val.substr(0, 4) + "..." : val
						//   }
						// },
						triggerEvent: true
					}],
					yAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#FFF'
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: ['#6c6c6c'],
								width: 1,
								type: 'solid'
							},
						}
					}],
					series: [{
						name: '数据总量',
						type: 'bar',
						barWidth: 20,
						data: value
					}]
				})
			},

			getxzzk() {
				let data = []
				let value = []
				for (let i in this.zufangInfo[10].itmes) {
					data.push(this.zufangInfo[10].itmes[i].name)
					value.push(this.zufangInfo[10].itmes[i].value)
				}
				let echarts = document.getElementById('main4')
				let myChart = this.$echarts.init(echarts)
				myChart.setOption({
					title: {
						text: '当月新增租住人数趋势图',
						textStyle: {
							color: '#56FFFA'
						},
						top: '15%',
						left: '0%'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.reverse(),
						axisLine: {
							lineStyle: {
								color: '#e5e5e5'
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#e5e5e5'
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: ['#6c6c6c'],
								width: 1,
								type: 'solid'
							},
						}
					},
					grid: {
						top: '30%',
						left: '5%'
					},
					series: [{
						name: '新增租住人数',
						type: 'line',
						data: value.reverse(),
						symbol: 'none',
						smooth: true,
						areaStyle: {
							color: '#17495d'
						},
						lineStyle: {
							color: '#47e3ff'
						}
					}]
				})
			},


			getdnxzzk() {
				let data = []
				let value = []
				for (let i in this.zufangInfo[11].itmes) {
					data.push(this.zufangInfo[11].itmes[i].name)
					value.push(this.zufangInfo[11].itmes[i].value)
				}
				let echarts = document.getElementById('main5')
				let myChart = this.$echarts.init(echarts)
				myChart.setOption({
					title: {
						text: '当年新增租住人数趋势图',
						textStyle: {
							color: '#56FFFA'
						},
						top: '15%',
						left: '5%'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.reverse(),
						axisLine: {
							lineStyle: {
								color: '#e5e5e5'
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#e5e5e5'
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: ['#6c6c6c'],
								width: 1,
								type: 'solid'
							},
						}
					},
					grid: {
						top: '30%'
					},
					series: [{
						name: '新增租住人数',
						type: 'line',
						data: value.reverse(),
						symbol: 'none',
						smooth: true,
						areaStyle: {
							color: '#66DEA55C'
						},
						lineStyle: {
							color: '#DEA55C'
						}
					}]
				})
			},

			intelligenceDetailPageShow(titleName, num,id) {
				this.clickTitle = "租房管理：" + titleName;
				this.typeId = num;
				this.pepleishow = false;
				this.carDetailPage(id)
			},
			async carDetailPage(id) {

				var data = {};
				var _this = this;
				_this.intelligence = [];
				data.placeId = this.code;
				data.pageNum = this.pageNum;
				data.pageSize = this.pageSize;

				if (this.peopleName != '') {
					data.name = this.peopleName
				}
				if (this.peopleUserID != '') {
					data.idNum = this.peopleUserID
				}
				if (this.totalTime != '') {
					console.log(this.totalTime)
					data.startTime = this.totalTime[0]
					data.endTime = this.totalTime[1]
				}
				if (this.unitType == 1) {
					data.statusType = 1
				} else if (this.unitType == 2) {
					data.statusType = 2
				} else if (this.unitType == 10) {
					data.statusType = ''
				} else if (this.unitType == 3) {
					data.statusType = 0
				}

				console.log("=-=-" + JSON.stringify(data));
				if (_this.typeId == 1) {
					const res = await getHouseRentalForPage(data);
					console.log("**********");
					console.log(JSON.stringify(res));

					_this.intelligence = res.list
					_this.alltotal = res.total;
					_this.allpage = Math.ceil(_this.alltotal / _this.pageSize);
				}else if(_this.typeId == 20){
          if(id){
          _this.typeId=1
        }
					data.typeId = 0;
					console.log("=-=-" + JSON.stringify(data));
					const res = await getHouseOwnerForPage(data);
					console.log("**********");
					console.log(JSON.stringify(res));

					_this.intelligence = res.list
					_this.alltotal = res.total;
					_this.allpage = Math.ceil(_this.alltotal / _this.pageSize);
				}else if(_this.typeId == 21){

					data.typeId = 1;
					console.log("=-=-" + JSON.stringify(data));
					const res = await getHouseOwnerForPage(data);
					console.log("**********");
					console.log(JSON.stringify(res));
        if(id){
                  this.typeId=1
                }
					_this.intelligence = res.list
					_this.alltotal = res.total;
					_this.allpage = Math.ceil(_this.alltotal / _this.pageSize);
				}else if(_this.typeId == 3){
					const res = await getHouseTenantForPage(data);
					console.log("**********");
					console.log(JSON.stringify(res));

					_this.intelligence = res.list
					_this.alltotal = res.total;
					_this.allpage = Math.ceil(_this.alltotal / _this.pageSize);
				}


			},
			//从详情页返回人口页面
			maskPageHide() {
				this.pepleishow = true;
				this.pageNum = 1;
				this.peopleName = '';
				this.peopleUserID = '';
				this.unitTypeName = '';
				this.unitType = '';
				this.totalTime = '';
				this.startTime = '';
				this.endTime = '';
				this.peopleName = '';
				this.peopleUserID = '';

				this.$nextTick(function(){
					this.getzkld()
					this.getsafe()
					this.getzukeage()
					this.getxzzk()
					this.getdnxzzk()
				})
			},
			currentChange(n) {
				console.log(n)
				console.log("分页");
				this.pageNum = n;
				this.carDetailPage();
			},
			async searchEvent() {
				console.log("===" + this.unitType)
				// if (this.peopleName == '' && this.peopleUserID == '' && this.totalTime == '' && this.unitType == '') {
				// 	console.log("stop")
				// 	return;
				// }
				console.log("pass")
				this.pageNum = 1;
				this.currentChange(1);
			},
			//选择下拉框
			selectItem(name, id) {
				this.unitTypeName = name;
				this.unitType = id;
			},

			//关闭
			closeMask() {
				this.$emit("closeMask")
			},

		}
	}
</script>
<style lang="less">
	.el-input__prefix {
		display: none;
	}

	.el-input__inner {
		height: 100% !important;
		width: 100%;
		background: transparent;
		padding: 0 !important;
		border: none;
	}
	.dateselect .el-input__inner {
		background-color: #06121d !important;
  }
  	.dateselect{
      border:1px solid grey !important;
    }

	.el-date-editor .el-range-input {
		background-color: #06121d !important;
	}
</style>

<style lang="less" scoped>
	.x-unit {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .8);
		z-index: 1000;

		.unit-ctx {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1177px;
			height: 800px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 10px 30px;
			box-sizing: border-box;

			.ctx-title {
				width: 100%;
				padding-top: 35px;
				box-sizing: border-box;
				font-family: PingFangSC-Medium;
				font-size: 24px;
				color: #E9E9E9;
				letter-spacing: 4.8px;
				text-align: center;
				box-sizing: border-box;
			}

			.zufang_top {
				margin-top: 30px;

				ul {
					list-style: none;
					overflow: hidden;

					li {
						float: left;
            width: 190px;
            height:82px;
						overflow: hidden;
						border-right: 4px solid #69F1F7;

						img {
							float: left;
							margin-left: 20px;
							margin-top: 13px;
						}

						div {
							float: left;
							color: #69F1F7;
							margin-top: -20px;
							margin-left: 14px;
							text-align: left;

							p:nth-child(1) {
								font-size: 22px;
								margin-top: 36px;
							}

							p:nth-child(2) {
								font-size: 18px;
								margin-top: -15px;
							}
						}
					}

					li:nth-child(1) {
						margin-left: -30px;
					}

					li:nth-child(4) {
						width: 213px;
						// border-right: none;
          }
          li:nth-child(5) {
						width: 140px;
          }
          li:nth-child(6) {
            width: 115px;
            border-right: none;
					}
				}
			}

			.zufang_middle {
				overflow: hidden;

				.zufang_middle_left {
					width: 850px;
					float: left;

					.two_ects {
						overflow: hidden;

						#main2 {
							float: left;
						}

						#main3 {
							float: left;
						}
					}
				}

				.zufang_middle_right {
					float: left;
					width: 255px;

					.type-title {
						color: #fff;
						font-size: 18px;
						font-weight: bold;
						text-align: left
					}

					.type-list {
						width: 100%;
						padding: 0;
						margin-top: 28px;
						list-style: none;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						box-sizing: border-box;

						.type-list-rs {
							width: 100%;
							list-style: none;
							margin-bottom: 28px;

							.rs-name {
								width: 100%;
								display: flex;
								justify-content: space-around;
								align-items: center;
								font-family: PingFangSC-Regular;
								font-size: 12px;
								color: #E5E5E5;
								margin-bottom: 5px;

								.name {
									flex: 1;
									text-align: left;
								}

								.number {
									flex: 1;
									text-align: right;
								}
							}

							.rs-process {
								width: 100%;
								height: 6px;
								border-radius: 4px;
								background: #333333;

								.process {
									transition: width .3s ease-in-out;
									height: 100%;
									border-radius: 4px;
									background-image: linear-gradient(270deg, #68E0CF 0%, #209CFF 100%);
								}
							}
						}
					}
				}
			}

			.zufang_bottom {
				overflow: hidden;
				margin-top: -45px;

				#main4 {
					float: left;
				}

				#main5 {
					float: left;
					margin-left: 15px;
				}
			}

		}
	}

	.x-house {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;

		.text-left.page2 {
			text-align: left;
		}

		.page2 {
			.unit-list {
				.list-li:nth-child(even) {
					background-color: #06121d;
				}
			}

			.back {
				float: right;
				position: absolute;
				right: 60px;
				width: 0px;
				top: 30px;

				img {
					width: 30px;
					height: 30px;
				}
			}

			.tabbar {
				padding: 0;
				margin: 0;
				list-style: none;
				text-align: left;
				text-align: left;
				margin-top: 20px;

				.tabbarContent {

					&>li,
					&>ul {
						padding: 0;
						margin: 0;
						list-style: none;
						color: #fff;
					}

					li {
						width: 33%;
						display: inline-block;
						padding-top: 10px;
						padding-bottom: 10px;

						span {
							width: 40%;
							display: inline-block;
						}
					}
				}

				&>li {
					display: inline-block;
					padding: 5px;
					border-radius: 4px;
					background: #0f0f2b;
					font-size: 16px;
					color: #fff;
				}

				.list-li:nth-child(even) {
					background-color: #06121d;
				}
			}

			.tabbar .active {
				background: #3f8aff;
				color: #fff;
			}

			.name {
				width: 100%;
				text-align: left;
				font-family: PingFangSC-Medium;
				font-size: 18px;
				color: #69d3da;
				letter-spacing: 0;
				overflow: hidden;
				white-space: nowrap;
				word-break: normal;
				text-overflow: ellipsis;
				margin-top: 20px;

				&>span {
					line-height: 2;
				}
			}

			.choose {
				float: right;
				padding: 0;
				margin: 0;
				position: relative;
				top: 0;
			}

			.choose ul,
			.choose li {
				list-style: none;
				display: inline-block;
			}

			.choose li {
				padding: 8px;
				border-radius: 4px;
				background: #0f0f2b;
				cursor: pointer;
			}

			.choose .active {
				background: #3f8aff;
				color: #fff;
			}

			.car-li {
				flex-wrap: wrap;

				.carDetail {
					display: flex;
					align-items: center;
					flex-grow: 1;
					width: 100% !important;

					&>div {
						width: 20%;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				&>div {
					width: 20% !important;
				}
			}

			.list-li {
				width: 100%;
				height: 50px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #ffffff;
				line-height: 36px;

				&>div {
					font-family: PingFangSC-Semibold;
					font-size: 16px;
					color: #ffffff;
					text-align: center;
					line-height: 22px;
					width: 100%;
				}

				&>.button-color {
					color: #3f8aff;
				}
			}
		}

		.house-ctx::-webkit-scrollbar {
			width: 0px;
			height: 16px;
			background-color: #ccc;
		}

		.house-ctx {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1177px;
			height: 800px;
			overflow-y: auto;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 10px 30px;
			box-sizing: border-box;

			.ctx-title {
				width: 100%;
				padding-top: 10px;
				box-sizing: border-box;
				font-family: PingFangSC-Medium;
				font-size: 24px;
				color: #e9e9e9;
				letter-spacing: 4.8px;
				text-align: center;
				box-sizing: border-box;
			}

			.ctx-info {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 28px;

				.info-item {
					flex: 1;
					height: 180px;

					.item-rs {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.rs-content {
							width: 50%;
							height: 100%;

							.content-name {
								width: 100%;
								font-family: PingFangSC-Medium;
								font-size: 18px;
								color: #69d3da;
								letter-spacing: 0;
								text-align: left;

								.iconfont {
									font-size: 22px;
									margin-right: 8px;
								}
							}

							.content-number {
								font-family: Silom;
								font-size: 40px;
								margin-top: 18px;
								text-align: left;
								color: #d0b01c;
								letter-spacing: 2.22px;
								line-height: 40px;

								.unit {
									font-family: PingFangSC-Medium;
									font-size: 18px;
									color: #69d3da;
									letter-spacing: 0;
								}
							}
						}
					}

					.item-name {
						width: 100%;
						font-family: PingFangSC-Medium;
						font-size: 18px;
						color: #69d3da;
						letter-spacing: 0;
						text-align: left;

						.iconfont {
							font-size: 22px;
							margin-right: 8px;
						}
					}

					.item-number {
						margin-top: 20px;
						font-family: Silom;
						font-size: 40px;
						color: #d0b01c;
						letter-spacing: 2.22px;
						text-align: left;
					}

					.item-pie {
						width: 100%;
						height: 140px;
						margin-top: 10px;
						padding: 5px 0px;
						box-sizing: border-box;

						.pie-canvas {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.ctx-footer {
				width: 100%;
				margin-top: 30px;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.footer-floor::-webkit-scrollbar {
					width: 0px;
					height: 16px;
					background-color: #ccc;
				}

				.footer-floor {
					flex: 1;
					height: 445px;
					overflow-y: auto;

					.floor-name {
						width: 100%;
						text-align: left;
						font-family: PingFangSC-Medium;
						font-size: 18px;
						color: #69d3da;
						letter-spacing: 0;
						overflow: hidden;
						white-space: nowrap;
						word-break: normal;
						text-overflow: ellipsis;
					}

					.floor-list {
						width: 100%;
						height: clac(100% - 25px);
						overflow-y: auto;
						margin-top: 20px;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.list-name {
							width: 55px;
							text-align: left;
							font-family: PingFangSC-Regular;
							font-size: 16px;
							color: #e9e9e9;
							min-width: 55px;
						}

						.kongzhi {
							background-color: #474747;
						}

						.qunzu {
							background-color: #ca504b;
						}

						.zizhu {
							background-color: #336298;
						}

						.chuzu {
							background-color: #c1812d;
						}

						.list-rs {
							//width: calc(100% - 55px);
							cursor: pointer;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							flex-direction: column;
							margin: 10px;
							margin-top: 0;
							margin-bottom: 0;

							.rs-item {
								width: 60px;
								height: 25px;
								text-align: center;
								line-height: 25px;
								font-family: PingFangSC-Regular;
								font-size: 16px;
								color: #e9e9e9;
								text-align: center;
								cursor: pointer;

								&.item-empty {
									background: #474747;
								}

								&.item-self {
									background: #21629c;
								}

								&.item-rent {
									background: #cc7f01;
								}

								&.item-other {
									background: #da4545;
								}
							}
						}
					}
				}

				.footer-unit::-webkit-scrollbar {
					width: 0px;
					height: 16px;
					background-color: #ccc;
				}

				.footer-unit {
					flex: 1;
					height: 450px;
					overflow-y: auto;

					.unit-header {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.header-btn {
							width: 60px;
							height: 32px;
							background: #102c45;
							margin-right: 3px;
							line-height: 32px;
							font-family: PingFangSC-Regular;
							font-size: 14px;
							color: #ffffff;
							letter-spacing: 0;
							text-align: center;

							&:first-child {
								border-top-left-radius: 4px;
								border-bottom-left-radius: 4px;
							}

							&:last-child {
								border-top-right-radius: 4px;
								border-bottom-right-radius: 4px;
								margin-right: 0;
							}

							&.active {
								background: #209cff;
							}
						}
					}

					.unit-list {
						width: 100%;
						height: clac(100% - 25px);

						margin-top: 30px;

						.list-title {
							font-family: PingFangSC-Semibold;
							font-size: 16px;
							color: #ffffff;
							text-align: center;
							line-height: 22px;
						}

						.list-ul {
							width: 90%;
							height: clac(100% - 25px);
							margin-top: 15px;
							overflow-y: auto;
							list-style: none;

							.list-li:nth-child(even) {
								background-color: #06121d;
							}

							.list-li {
								cursor: pointer;
								width: 100%;
								height: 36px;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-family: PingFangSC-Regular;
								font-size: 14px;
								color: #ffffff;
								line-height: 36px;

								.item-no {
									width: 30%;

									box-sizing: border-box;
								}

								.li-name {
									width: 50%;

									box-sizing: border-box;
								}

								.li-sex {
									width: 40%;

									box-sizing: border-box;
								}

								.li-age {
									width: 40%;

									box-sizing: border-box;
								}

								.li-phone {
									box-sizing: border-box;
									width: 100%;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}
						}
					}
				}
			}
		}
	}

	.input {
		font-size: 14px;
		color: #fff;
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		background: transparent;
	}

	.header-item {
		width: 186px;
		height: 100%;
		border: none;
		outline: none;
		background: #06121d;
		border: 1px solid rgba(62, 178, 215, 0);
		border-radius: 4px;
		font-size: 14px;
		color: #fff;
		padding: 0 14px;
		box-sizing: border-box;
	}

	.header-btn {
		width: 66px;
		height: 100%;
		background: #72edf5;
		border-radius: 4px;
		text-align: center;
		line-height: 36px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #000000;
		cursor: pointer;
	}

	.header-select {
		width: 186px;
		height: 100%;
  }
  #ulhight{
    height:300px;
    overflow-y: scroll;
  }
  #ulhight::-webkit-scrollbar {
		display: none;
	}


</style>
<style lang="">
	.dateselect .el-input__inner {
	  background: #06121d !important;
	}
  	.dateselect{
      border:1px solid grey !important;
    }
	.el-date-editor .el-range-input {
	  background: #06121d !important;
	}
</style>
